diff options
Diffstat (limited to 'src/pages/my/transactions/[id].js')
| -rw-r--r-- | src/pages/my/transactions/[id].js | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js new file mode 100644 index 00000000..79337a29 --- /dev/null +++ b/src/pages/my/transactions/[id].js @@ -0,0 +1,124 @@ +import AppBar from "@/components/layouts/AppBar"; +import Layout from "@/components/layouts/Layout"; +import LineDivider from "@/components/elements/LineDivider"; +import WithAuth from "@/components/auth/WithAuth"; +import { useEffect, useState } from "react"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { useRouter } from "next/router"; +import { useAuth } from "@/core/utils/auth"; +import VariantCard from "@/components/variants/VariantCard"; +import currencyFormat from "@/core/utils/currencyFormat"; +import Disclosure from "@/components/elements/Disclosure"; +import DescriptionRow from "@/components/elements/DescriptionRow"; +import { CustomerSection } from "@/components/transactions/TransactionDetail"; + +export default function DetailTransactions() { + const router = useRouter(); + const { id } = router.query; + const [ auth ] = useAuth(); + const [ transaction, setTransaction ] = useState(null); + const [ activeSection, setActiveSection ] = useState({ + purchase: false, + shipping: false, + invoice: false, + }); + + const toggleSection = ( name ) => { + setActiveSection({ + ...activeSection, + [name]: !activeSection[name] + }); + }; + + useEffect(() => { + if (auth) { + const loadTransaction = async () => { + const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`); + setTransaction(dataTransaction); + } + loadTransaction(); + } + }, [ auth, id ]); + + return ( + <WithAuth> + <Layout className="pb-4"> + <AppBar title="Detail Transaksi" /> + + <div className="p-4 flex flex-col gap-y-4"> + <DescriptionRow label="Status Transaksi"> + <span className="badge-green">Pending Quotation</span> + </DescriptionRow> + <DescriptionRow label="No Transaksi"> + { transaction?.name } + </DescriptionRow> + <DescriptionRow label="Purchase Order"> + { transaction?.po_name || '-' } + </DescriptionRow> + <DescriptionRow label="Ketentuan Pembayaran"> + { transaction?.payment_term } + </DescriptionRow> + <DescriptionRow label="Nama Sales"> + { transaction?.sales } + </DescriptionRow> + <DescriptionRow label="Waktu Transaksi"> + { transaction?.date_order } + </DescriptionRow> + </div> + + <LineDivider /> + + <Disclosure + label="Detail Produk" + /> + + <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3"> + { transaction?.products?.map((product, index) => ( + <VariantCard + key={index} + data={product} + /> + )) } + <div className="flex justify-between mt-3 font-medium"> + <p>Total Belanja</p> + <p>{ currencyFormat(transaction?.amount_total || 0) }</p> + </div> + </div> + + + <LineDivider /> + + <Disclosure + label="Detail Pembeli" + active={activeSection.purchase} + onClick={() => toggleSection('purchase')} + /> + { activeSection.purchase && ( + <CustomerSection address={transaction?.address?.customer} /> + ) } + + <LineDivider /> + + <Disclosure + label="Detail Pengiriman" + active={activeSection.shipping} + onClick={() => toggleSection('shipping')} + /> + { activeSection.shipping && ( + <CustomerSection address={transaction?.address?.shipping} /> + ) } + + <LineDivider /> + + <Disclosure + label="Detail Penagihan" + active={activeSection.invoice} + onClick={() => toggleSection('invoice')} + /> + { activeSection.invoice && ( + <CustomerSection address={transaction?.address?.invoice} /> + ) } + </Layout> + </WithAuth> + ); +}
\ No newline at end of file |